<template>
  <div class="home">
    <button @click="$router.push('/about')">购物车</button>
    <ul>
        <li v-for="(item,index) in goodsList" :key="index">
            <img :src="'/img/'+item.productImage" alt="">
            <h5>{{item.productName}}</h5>
            <div>
                <span>{{item.salePrice}}</span>
                <button @click="add(item)">加入购物车</button>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {computed,ref,reactive,toRefs} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import axios from 'axios'
export default {
//   name: 'HomeView',
setup(props) {
    const {commit} = useStore()
    const {push} = useRouter()
    const data = reactive({
        goodsList:[],//存放请求过来的数据
    })
    axios.get('data.json').then(res=>{
        console.log(res);
        data.goodsList = res.data.result.list
    })
    const add=(item)=>{
        commit('addCart',item)
         push('/about')
        alert('加入购物车成功')
    }
    return {...toRefs(data),add}
},
  components: {
    // HelloWorld
  }
}
</script>
<style lang="scss" scoped>
.home{
    width: 1000px;
    margin: 50px auto;
    border: 1px solid #999;
    padding: 20px;
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width:200px;
            height: 200px;
            text-align: center;
            img{
                width: 100%;
                height: 150px;
            }
        }
    }

}
</style>

